import React, { Component } from 'react'
import { connect } from 'react-redux';
import actions from './../store/actions/todo';

class Todo extends Component {
    render() {
        return (
            <div>
                <input type="text" onKeyDown={e=>{
                    if(e.keyCode===13){
                        
                        this.props.addList(e.target.value);
                    }
                }} />
                <ul>
                    {this.props.counts.map((item, index) => (
                        <li key={index}>
                            {item}
                            <button onClick={()=>{this.props.removeList(index)}}>X</button>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}
export default connect(state => ({ counts: state.todo }), actions)(Todo)